$(function () {
    // var whdef = 100/1920;// 表示1920的设计图,使用100PX的默认值
    var whdef = 100/916;// 表示1920的设计图,使用100PX的默认值
    var wH = window.innerHeight;// 当前窗口的高度
    var wW = window.innerWidth;// 当前窗口的宽度
    // var rem = wW * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
    var rem = wH * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
    $('html').css('font-size', rem + "px");

    // 加载党员年龄情况图的参数
    load_ec1(0);
    load_ec2(0);
    load_ec3(0);

    load_ec7(0);
    load_ec8(0);
    load_ec9(0);

    load_ec4(0);
    load_ec5(0);
    load_ec6(0);
}) ;

// 加载年龄情况图
function load_ec1(type){
    myChart1.clear();
    option = {
        legend: {
            type:'plain',
            data:['女','男'],
            orient: 'horizontal',
            top: 5,
            left: 'center',
            textStyle:{
                fontSize: 14,
                color: '#6cbbe6'
            }
        },
        tooltip: {},
        backgroundColor: 'rgba(255,255,255,0)',
        /*
        dataset: {
            source: [
                ['product', '女', '男'],
                ['35岁以下岁', 43, 85],
                ['35-45岁', 30, 70],
                ['45-55岁', 55, 45],
                ['55-65岁', 75, 25],
                ['65岁以上', 46, 54]
            ]
            
        },*/
        grid:{
            x:30,
            y:30,
            x2:10,
            height:'70%'
        },
        xAxis:[
            {
                type : 'category',
                data:['35岁以下岁','35-44岁','45-54岁','55-64岁','65岁以上'],
                boundaryGap : true,
                axisLabel:{
                    textStyle:{
                        color: '#6cbbe6'
                    }
                }
            }
        ],
        yAxis: [
            {
                type : 'value',
                axisLabel:{
                    textStyle:{
                        color: '#6cbbe6'
                    }
                }
            }
        ],
        series: [
            {
                name:['女'],
                type: 'bar',
                barWidth:15, /* 柱子宽带 */
  	            barGap:'5%',/*多个并排柱子设置柱子之间的间距*/
  	            barCategoryGap:'5%',/*多个并排柱子设置柱子之间的间距*/

                data:[43,30,55,75,46]
            },
            {
                name:['男'],
                type: 'bar',
                barWidth:15,
  	            barGap:'5%',/*多个并排柱子设置柱子之间的间距*/
  	            barCategoryGap:'5%',/*多个并排柱子设置柱子之间的间距*/
                data:[85,70,45,25,54]
            }
        ]
    };
    myChart1.setOption(option);
}

// 加载学历情况图
function load_ec2(type){
    myChart2.clear();

    var data = [{
        value:48,
        name: '博士研究生'
    },{
        value:48,
        name: '大学'
    }, {
        value: 10,
        name: '大专'
    }, {
        value: 1,
        name: '职业高中'
    }, {
        value: 33,
        name: '初中'
    }];
    var option = {
        backgroundColor: 'rgba(255,255,255,0)',
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'horizontal',
            top: '2%',
            left: 'center',
            data: ['博士研究生', '大学', '大专', '职业高中','初中'],
            textStyle:{
                fontSize: 14,
                color: '#6cbbe6'
            }
        },
        series: [{
            name: '学历',
            type: 'pie',
            selectedMode: 'single',
            center : ['50%', '60%'],
            radius: ['40%', '58%'],
            color: ['#C1232B','#B5C334','#FCCE10','#E87C25','#27727B','#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD'],
            label: {
                normal: {
                    position: 'outside',
                    formatter: '{b} {d}%',
                    textStyle: {
                        color: '#3db3cb',
                        fontSize: 20
                    }
                }
            },
            labelLine: {
                normal: {
                    show: true,
                    lineStyle: {
                        color: '#3db3cb'
                    }
                }
            },
            data: data
        }]
    };
    myChart2.setOption(option);
}

// 加载性别情况图
function load_ec3(type){
    myChart3.clear();
    option = {
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            top: 20,
            right: 20,
            textStyle:{
                fontSize: 14,
                color: '#6cbbe6'
            },
            //bottom: 5,
            //left: 'center',
            data: ['女', '男']
        },
        series : [
            {
                name: '性别',
                type: 'pie',
                radius : '65%',
                center: ['50%', '50%'],
                selectedMode: 'single',
                data:[
                    {
                        value:2548,
                        name: '女',
                    },
                    {value:3535, name: '男'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                label: {
                    normal: {
                        position: 'outside',
                        formatter: '{b} {d}%',
                        textStyle: {
                            color: '#3db3cb',
                            fontSize: 20
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: true,
                        lineStyle: {
                            color: '#3db3cb'
                        }
                    }
                }
            }
        ]
    };
    myChart3.setOption(option);
    myChart3.on('click', function (params) {
        //alert("name:"+params.name+" value:"+params.value);
        window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
    });
}


// 加载平台情况图
function load_ec7(type){
    myChart41.clear();
    myChart42.clear();

    option41 = {
        title:{
            text: '账号激活率',
            bottom: 0,
           left:'center',
           textStyle:{
                //文字颜色
                color:'#3db3cb',
                //字体风格,'normal','italic','oblique'
                fontStyle:'normal',
                //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
                fontWeight:'bold',
                //字体系列
                fontFamily:'sans-serif',
                //字体大小
        　　　　 fontSize:18
            }
        },
        tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
        },
        toolbox: {
//            feature: {
//                restore: {},
//               saveAsImage: {}
//           }
        },
        series: [
            {
                name: '账号激活率',
                type: 'gauge',
                center: ["50%", "50%"], // 默认全局居中
                radius: "90%", //仪表大小
                itemStyle:{//指针样式
                    normal:{
                        color:'#f00'
                    }
                },
                axisLabel : { //文字样式（及“10”、“20”等文字样式）
                    color : "#3db3cb",
                    distance : -50 //文字离表盘的距离
                },
                axisLine : {
                    show : true,
                    lineStyle : { // 属性lineStyle控制线条样式
                    color : [ //表盘颜色
                        [ 0.5, "#DA462C" ],//0-50%处的颜色
                        [ 0.7, "#FF9618" ],//51%-70%处的颜色
                        [ 0.9, "#FFED44" ],//70%-90%处的颜色
                        [   1, "#20AE51" ] //90%-100%处的颜色
                    ],
                    width : 30//表盘宽度
                    }
                },
                   
                   
                detail: {formatter:'{value}%'},
                data: [{value: 85}]
            }
        ]
    };

    option42 = {
        title:{
            text: '日活跃率',
            bottom: 0,
           left:'center',
           textStyle:{
                //文字颜色
                color:'#3db3cb',
                //字体风格,'normal','italic','oblique'
                fontStyle:'normal',
                //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
                fontWeight:'bold',
                //字体系列
                fontFamily:'sans-serif',
                //字体大小
        　　　　 fontSize:18
            }
        },
        tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
        },
        toolbox: {
//            feature: {
//                restore: {},
//                saveAsImage: {}
//            }
        },
        series: [
            {
                name: '日活跃率',
                type: 'gauge',
                center: ["50%", "50%"], // 默认全局居中
                radius: "90%", //仪表大小
                itemStyle:{//指针样式
                    normal:{
                        color:'#00f'
                    }
                },
                axisLabel : { //文字样式（及“10”、“20”等文字样式）
                    color : "#3db3cb",
                    distance : -50 //文字离表盘的距离
                },
                axisLine : {
                    show : true,
                    lineStyle : { // 属性lineStyle控制线条样式
                    color : [ //表盘颜色
                        [ 0.5, "#DA462C" ],//0-50%处的颜色
                        [ 0.7, "#FF9618" ],//51%-70%处的颜色
                        [ 0.9, "#FFED44" ],//70%-90%处的颜色
                        [   1, "#20AE51" ] //90%-100%处的颜色
                    ],
                    width : 30//表盘宽度
                    }
                },
                detail: {formatter:'{value}%'},
                data: [{value: 78}]
            }
        ]
    };
    myChart41.setOption(option41);
    myChart42.setOption(option42);
}

// 加载登录趋势图
function load_ec8(type){
    myChart5.clear();
    option = {
        grid:{
            x:30,
            y:30,
            x2:10,
            height:'70%'
        },
        xAxis: {
            type: 'category',
            axisLabel:{
                textStyle:{
                    color: '#6cbbe6'
                }
            },
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
            type: 'value',
            axisLabel:{
                textStyle:{
                    color: '#6cbbe6'
                }
            }
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            itemStyle : {  
                normal : {  
                    lineStyle:{  
                        color:'#6cbbe6',
                        width: 10
                    }  
                }  
            }
        }]
    };
    myChart5.setOption(option);
}

// 加载党员特长图
function load_ec9(type){
    myChart6.clear();
    var option = {
        dataset: {
            source: [
                ['score', 'amount', 'product'],
                [89.3, 582, '唱歌'],
                [57.1, 782, '跳舞'],
                [74.4, 410, '跑步'],
                [50.1, 275, '游泳'],
                //[89.7, 20145, '足球'],
                [68.1, 796, '排球'],
                [19.6, 852, '篮球'],
                [10.6, 852, '高尔夫'],
                [32.7, 712, '钢琴']
            ]
        },
        grid:{
            containLabel: true,
            x:30,
            y:20,
            x2:10,
            height:'85%'
        },
        xAxis: {
            name: 'amount',
            axisLabel:{
                textStyle:{
                    color: '#6cbbe6'
                }
            }
        },
        yAxis: {
            type: 'category',
            axisLabel:{
                textStyle:{
                    color: '#6cbbe6'
                }
            }
        },
        
        visualMap: {
            //orient: 'horizontal',
            top: 2,
            left: 0,
            min: 10,
            max: 100,
            text: ['热门', '冷门'],
            // Map the score column to color
            dimension: 0,
            inRange: {
                color: ['#D7DA8B', '#E15457']
            },
            textStyle:{
                color: '#6cbbe6'
            }
        },
        
        series: [
            {
                type: 'bar',
                //barWidth:15,
                encode: {
                    // Map the "amount" column to X axis.
                    x: 'amount',
                    // Map the "product" column to Y axis
                    y: 'product'
                }
            }
        ]
    };
    
    myChart6.setOption(option);
}

// 加载组织建设情况图
function load_ec4(type){

}

// 加载发展党员情况图
function load_ec5(type){
    myChart8.clear();
    option = {
        grid:{
            x:30,
            y:30,
            x2:10,
            height:'70%'
        },
        xAxis: {
            type: 'category',
            axisLabel:{
                textStyle:{
                    color: '#6cbbe6'
                }
            },
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        yAxis: {
            type: 'value',
            axisLabel:{
                textStyle:{
                    color: '#6cbbe6'
                }
            }
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320, 901, 934, 1290, 1330, 1320],
            type: 'line',
            itemStyle : {  
                normal : {  
                    lineStyle:{  
                        color:'#bd9300',
                        width: 10
                    }  
                }  
            }
        }]
    };
    myChart8.setOption(option);
}

// 加载支部党员情况图
function load_ec6(type){
    myChart9.clear();
    option = {
        legend: {
            type:'plain',
            data:['党员','预备党员','发展对象','积极分子'],
            orient: 'horizontal',
            top: 5,
            left: 'center',
            textStyle:{
                fontSize: 14,
                color: '#6cbbe6'
            }
        },
        tooltip: {},
        backgroundColor: 'rgba(255,255,255,0)',
        grid:{
            x:30,
            y:30,
            x2:10,
            height:'70%'
        },
        xAxis:[
            {
                type : 'category',
                data:['直属党建工作部门','第一党支部','第二党支部','第三党支部','第四党支部'],
                boundaryGap : true,
                axisLabel:{
                    textStyle:{
                        color: '#6cbbe6'
                    }
                }
            }
        ],
        yAxis: [
            {
                type : 'value',
                axisLabel:{
                    textStyle:{
                        color: '#6cbbe6'
                    }
                }
            }
        ],
        series: [
            {
                name:['党员'],
                type: 'bar',
                barWidth:15, /* 柱子宽带 */
  	            barGap:'5%',/*多个并排柱子设置柱子之间的间距*/
  	            barCategoryGap:'5%',/*多个并排柱子设置柱子之间的间距*/

                data:[43,30,55,75,46]
            },
            {
                name:['预备党员'],
                type: 'bar',
                barWidth:15, /* 柱子宽带 */
  	            barGap:'5%',/*多个并排柱子设置柱子之间的间距*/
  	            barCategoryGap:'5%',/*多个并排柱子设置柱子之间的间距*/

                data:[43,30,55,75,46]
            },
            {
                name:['发展对象'],
                type: 'bar',
                barWidth:15, /* 柱子宽带 */
  	            barGap:'5%',/*多个并排柱子设置柱子之间的间距*/
  	            barCategoryGap:'5%',/*多个并排柱子设置柱子之间的间距*/

                data:[43,30,55,75,46]
            },
            {
                name:['积极分子'],
                type: 'bar',
                barWidth:15,
  	            barGap:'5%',/*多个并排柱子设置柱子之间的间距*/
  	            barCategoryGap:'5%',/*多个并排柱子设置柱子之间的间距*/
                data:[85,70,45,25,54]
            }
        ]
    };
    myChart9.setOption(option);
}
